<template>
<!-- 关于我们 -->
  <div id="aboutUs">
    <div class="content_title">
      <topLogo></topLogo>
    </div>
    <div class="aboutUs_text">About us</div>
    <div class="tab_nav">
      <van-tabs animated :lazy-render="true" :ellipsis="false">
        <van-tab title='AFORM'>
          <span>aform</span>
          <div class="img_logo">
            <img src="http://47.112.6.89/public/upload/company/28182109cd37b74dacf930dad8a103a3.png" alt="">
          </div>
          <div class="article">
            “筑于灵感 · 和于自然”，代表的是一种与众不同的精品建筑思想。筑和设计集团从构筑美学与自然融为一体的维度出发，极力推动建筑与城市的和谐发展，在持续创新与实践中不断丰富品牌内涵。
              筑和设计集团，总部位于广州。自成立以来，始终如一地专注于设计领域。经过多年的探索与发展，旗下拥有筑和建筑设计事务所、城拓建筑设计院、其米装饰工程公司、
              筑和智建科技公司等子公司，成为覆盖建筑全产业链的建筑设计集团，业务范围涵盖建筑设计、室内工程及设计、技术咨询、施工建设、装配式建筑产品的研发与实施等。
          </div>
          <div class="us_buttom" :class="num ? 'addWidth' : ''">
            <router-link to="/project"><p>查看项目 PROJECT</p></router-link>
          </div>
        </van-tab>
        <van-tab title='CHENG TUO'>
          <span>cheng tuo</span>
          <div class="img_logo">
            <img src="http://47.112.6.89/public/upload/company/6c52920ce8af99f66d930f03f569d509.png" alt="">
          </div>
          <div class="article">
            “筑于灵感 · 和于自然”，代表的是一种与众不同的精品建筑思想。筑和设计集团从构筑美学与自然融为一体的维度出发，极力推动建筑与城市的和谐发展，在持续创新与实践中不断丰富品牌内涵。
              筑和设计集团，总部位于广州。自成立以来，始终如一地专注于设计领域。经过多年的探索与发展，旗下拥有筑和建筑设计事务所、城拓建筑设计院、其米装饰工程公司、
              筑和智建科技公司等子公司，成为覆盖建筑全产业链的建筑设计集团，业务范围涵盖建筑设计、室内工程及设计、技术咨询、施工建设、装配式建筑产品的研发与实施等。
          </div>
          <div class="us_buttom" :class="num ? 'addWidth' : ''">
            <router-link to="/project"><p>查看项目 PROJECT</p></router-link>
          </div>
        </van-tab>
        <van-tab title='QIMI'>
          <span>qimi</span>
          <div class="img_logo">
            <img src="http://47.112.6.89/public/upload/company/f17bd0fac5aeb6e2d47e658312bd6ea6.png" alt="">
          </div>
          <div class="article">
            “筑于灵感 · 和于自然”，代表的是一种与众不同的精品建筑思想。筑和设计集团从构筑美学与自然融为一体的维度出发，极力推动建筑与城市的和谐发展，在持续创新与实践中不断丰富品牌内涵。
              筑和设计集团，总部位于广州。自成立以来，始终如一地专注于设计领域。经过多年的探索与发展，旗下拥有筑和建筑设计事务所、城拓建筑设计院、其米装饰工程公司、
              筑和智建科技公司等子公司，成为覆盖建筑全产业链的建筑设计集团，业务范围涵盖建筑设计、室内工程及设计、技术咨询、施工建设、装配式建筑产品的研发与实施等。
          </div>
          <div class="us_buttom" :class="num ? 'addWidth' : ''">
            <router-link to="/project"><p>查看项目 PROJECT</p></router-link>
          </div>
        </van-tab>
        <van-tab title='ZHIJIAN'>
          <span>zhijian</span>
          <div class="img_logo">
            <img src="http://47.112.6.89/public/upload/company/fc57c84cd999f0ba18a3902861d974b1.png" alt="">
          </div>
          <div class="article">
            “筑于灵感 · 和于自然”，代表的是一种与众不同的精品建筑思想。筑和设计集团从构筑美学与自然融为一体的维度出发，极力推动建筑与城市的和谐发展，在持续创新与实践中不断丰富品牌内涵。
              筑和设计集团，总部位于广州。自成立以来，始终如一地专注于设计领域。经过多年的探索与发展，旗下拥有筑和建筑设计事务所、城拓建筑设计院、其米装饰工程公司、
              筑和智建科技公司等子公司，成为覆盖建筑全产业链的建筑设计集团，业务范围涵盖建筑设计、室内工程及设计、技术咨询、施工建设、装配式建筑产品的研发与实施等。
          </div>
          <div class="us_buttom" :class="num ? 'addWidth' : ''">
            <router-link to="/project"><p>查看项目 PROJECT</p></router-link>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import topLogo from "../../components/topLogo";
export default {
  data () {
    return {
      num: false,
    }
  },
  components: {
    topLogo
  },
  methods: {
    // 添加动画效果
    effect() {
      this.num = true;
    },
  },
  beforeMount() {
    var _this = this;
    setTimeout(function() {
      _this.effect();  //添加动画类名
    },100)
  },
  beforeDestroy() {
    this.num = false; //去掉添加动画类名
  },
}
</script>

<style lang="less" scoped>
#aboutUs {
  // padding: 0px 20px;
  margin-bottom: 60px;
}
/deep/ .van-tabs__nav {
  background-color: transparent;
}
/deep/ .van-tabs__line {
  background-color: #333;
  height: 1px;
}
.article {
  font-size: 14px;
  font-weight: normal;
  line-height: 25px;
  color: #555;
}
.img_logo {
  width: 100%;
  margin-bottom: 30px;
  margin-top: 50px;
  img {
    width: 65%;
    margin-left: 5px;
  }
}
.tab_nav {
  padding: 0px 20px;
  span {
    font-size: 16px;
  }
}
.us_buttom {
  font-size: 13px;
  border: 1px solid #444;
  // margin-bottom: 10px;
  width: 1px;
  height: 50px;
  opacity: 0;
  transition-duration: 0.8s;
  overflow: hidden;
  text-align: center;
  line-height: 50px;
  margin: auto;
  margin-top: 70px;
  a {
    display: block;
  }
  a:visited { 
    color:#555; 
    text-decoration:none; 
  }
  // a:hover {
  //   background-color: red;
  // }
  a:active {
    background-color:#ccc;
  }
}
.addWidth {
  width: 240px;
  opacity: 1;
  transition-duration: 0.8s;
  transition-delay: 1.5s;
}
.content_title {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
}
.aboutUs_text {
  padding: 0px 20px;
  margin-bottom: 20px;
}

</style>